<template>
  <div class="treetools" style="width: 100%">
    <el-row style="width: 100%" type="flex" justify="space-between">
      <el-col class="left"><i class="el-icon-user-solid"></i>{{ item.name }}</el-col>
      <el-col class="right">
        <div style="text-align: right">
          <span>{{item.manager}}</span>
          <el-dropdown class="mydown" @command="mycommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="one" >添加子部门</el-dropdown-item>
              <el-dropdown-item command="two" v-if="!istop">查看部门</el-dropdown-item>
              <el-dropdown-item command="three" v-if="!istop">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import{delDepartmentsApi}from'@/api/departments.js'
export default {
  // item: 显示左侧的内容
  // isTop: 是否是公司部门
  props: ['item', 'istop'],
  methods:{
   async mycommand(command){
      if(command === 'three'){
        try {
          await this.$confirm('是否删除部门','提示')
          await delDepartmentsApi(this.item.id)
          this.$emit('refash')
        } catch (error) {
          this.$message('取消删除')
        }
      }else if(command==="one"){
        this.$emit('changeAdd',this.item)
      }else{
         this.$emit('changeEidtAdd',this.item)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.treetools {
  .left {
    font-weight: 700;
    font-size: 14px;
    i {
      margin-right: 6px;
    }
  }
  .right {
    font-size: 14px;
    .mydown {
      margin-left: 20px;
    }
  }
}
</style>